<template>
<div>
  <router-view ref="refPage"></router-view>
  <div class="footer_box">
    <div v-for="item in footerList" :key="item.routeName" class="footer_list" @click="tabChange(item.routeName)">
      <div><img :src="currentName == item.routeName?item.hoverUrl:item.url" class="icon"></div>
      <div :class="currentName == item.routeName?'hover':''">{{item.name}}</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      currentName:'index',
      footerList:[
        {name:'书库',routeName:'index',url: require('@/assets/index/book.png'),hoverUrl:require('@/assets/index/book_hover.png')},
        {name:'专题',routeName:'special',url: require('@/assets/index/special.png'),hoverUrl:require('@/assets/index/special_hover.png')},
        {name:'书架',routeName:'bookShelf',url: require('@/assets/index/bookshelf.png'),hoverUrl:require('@/assets/index/bookshelf_hover.png')},
        {name:'我的',routeName:'my',url: require('@/assets/index/my.png'),hoverUrl:require('@/assets/index/my_hover.png')},
      ]
    }
  },
  watch: {
    $route:{
      handler(newRouter){
        this.currentName = newRouter.name;
      },
      immediate: true
  }
  },
  methods:{
    tabChange(name){
      this.$router.push({name:name})
    }
  }
}
</script>


<style scoped>
.footer_box{
  height: 1.3rem;
  width: 100%;
  background: #fff;
  color: #9FA4B9;
  display: flex;
  box-shadow:0px -1px 42px 0px rgba(223,223,223,0.6);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding-top: 0.1rem;
  box-sizing: border-box;
}
.footer_list{
  flex: 1;
  text-align: center;
  font-size: 11px;
}
.icon{
  height: 0.48rem;
  width: 0.48rem;
  margin-top: 0.1rem;
}
.hover{
  color: #FD7068;
}
</style>
